@charset "utf-8";
@import "common";
$color:#31c27c;
#singer-songs {
    width: 100%;
    .singer-info {
        width: 100%;
        .singer-img {
            width: 150px;
            height: 150px;
            margin: 5px auto;
            font-size: 0;
            border-radius: 10px;
            overflow: hidden;
            img {
                width: 100%;
            }
        }
        .singer-name {
            margin-bottom: 5px;
            font-size: 20px;
            text-align: center;
        }
    }
    .song-total{
        width: 100%;
        p{
            margin-bottom: 15px;
            span:first-child{
                display: inline-block;
                width: 10px;
                height: 20px;
                margin-right: 5px;
                background-color: $color;
                vertical-align: middle;
            }
            span:last-child{
                vertical-align: middle;
                font-size: 14px;
                color: $color;
            }
        }
    }
    ul {
        li {
            box-sizing: border-box;
            position: relative;
            padding-bottom: 10px;
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            .songName {
                font-size: 16px;
            }
            .songDesc {
                font-size: 12px;
                color: lightgray;
            }
            p {
                padding-left: 15px;
                padding-right: 50px;
                height: 1.5em;
            }
            &:last-child {
                margin-bottom: 0;
            }
        }
    }
    .footer {
        width: 100%;
        padding: 20px 0;
        text-align: center;
        background-image: url("../images/list_bottom_bg.png");
        background-repeat: no-repeat;
        background-size: cover;
        img {
            width: 32px;
            height: 32px;
        }
        p {
            font-size: 14px;
            color: $color;
            font-weight: 400;
        }
    }
}